<template>
  <!-- 资讯信息 -->
  <!-- <h3>资讯信息</h3> -->
  <div class="consultInfor">
    <!-- 头部查询开始 -->
    <div class="header" style="width: 100vw;position: relative;">
      <!-- 状态下拉框 -->
      <el-select v-model="inforStatus" clearable placeholder="请选择状态">
        <el-option label="未审核" value="未审核" />
        <el-option label="审核通过" value="审核通过" />
        <el-option label="审核不通过" value="审核不通过" />
        <el-option label="推荐" value="推荐" />
      </el-select>
      <!-- 标题输入框 -->
      <el-input
        v-model="inforName"
        style="width: 240px"
        placeholder="标题"
        clearable
      />
      <!-- 栏目下拉框 -->
      <el-select v-model="inforList" clearable placeholder="请选择栏目">
        <el-option
          v-for="infor in Infors"
          :key="infor.id"
          :label="infor.category.name"
          :value="infor.category.name"
        />
      </el-select>
      <el-button type="success" size="small">查询</el-button>
      <el-button
        type="success"
        size="small"
       style="margin-top: 5px;position: absolute;margin-left:1100px"
        >发布风采</el-button
      >
    </div>
    <!-- 头部查询结束 -->
    <!-- 表格开始 -->
    <el-table :data="Infors" style="width: 100%">
      <el-table-column label="序号" align="center" type="index">
      </el-table-column>
      <el-table-column label="封面" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <img :src="scope.row.cover" width="60px" height="60px" />
            <div slot="reference" class="name-wrapper">
              <img :src="scope.row.cover" width="130px" />
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="风采" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.title }}</div>
          <div v-if="scope.row.baseUser != null">
            {{ scope.row.baseUser.realname }}
          </div>
          <div>{{ scope.row.category.name }}</div>
          <div>{{ moment(scope.row.publishTime).format("YYYY-MM-DD") }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="editHandler(scope.row)"
            >{{ scope.row.status }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- slot-scope是自定义插槽 scope.row是获取需要编辑的一整行数据 -->
          <el-button
            type="primary"
            plain
            size="small"
            @click="recommendHandler(scope.row)"
            >推荐</el-button
          >
          <el-button
            type="primary"
            plain
            size="small"
            @click="checkHandler(scope.row)"
            >审核</el-button
          >
          <el-button
            type="danger"
            plain
            size="small"
            @click="deleteHandler(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="8"
        layout="total,sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      // categorys,
      list: {
        page: 1,
        pageSize: 10,
      },
      currentPage: 1,
      value: [],
      options: [],
      state: [],
      inforStatus: "",
      inforName: "",
      inforList: "",
    };
  },
  methods: {
    moment,
    ...mapActions("consultInfor", ["findAllInfor"]),
    handleChange() {},
    handleSelect() {},
    recommendHandler() {},
    checkHandler() {},
    deleteHandler() {},
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.list.pageSize = val;
      // 将当前的页数 重置到第一页
      this.currentPage = 1;
      // 重新调用获取所有产品数据的方法
      this.findAllInfor(this.list);
    },

    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      // this.currentPage = val;
      this.list.page = val;
      // 重新调用获取所有产品数据的方法
      this.findAllInfor(this.list);
    },
  },
  computed: {
    ...mapState("consultInfor", ["Infors", "total"]),
  },
  created() {
    this.findAllInfor(this.list);
  },
};
</script>

<style scoped>
.pagination {
  float: right;
  margin-top: 20px;
}
</style>